<template>
	<div class="basic-layout">
		<div :class="['nav-side', isCollapse ? 'fold' : 'unfold']">
			<!-- logo部分 -->
			<div class="logo">
				<img src="./../assets/logo.png" alt="" />
				<span>地图组件</span>
			</div>
			<!-- 组件列表 -->
			<el-menu
				default-active="2"
				background-color="#eef0f3"
				:collapse="isCollapse"
				router
				class="nav-menu"
			>
				<el-sub-menu index="1">
					<template #title>
						<i class="el-icon-location"></i>
						<span>地图组件</span>
					</template>
					<template v-for="(item, index) in routesList" :key="index">
						<el-menu-item :index="item.name">{{ item.meta.title }}</el-menu-item>
					</template>
				</el-sub-menu>
			</el-menu>
		</div>
		<div :class="['content-right', isCollapse ? 'fold' : 'unfold']">
			<div class="nav-top">
				<div class="nav-left">
					<div class="menu-fold" @click="toggle">
						<i class="el-icon-s-fold"></i>
					</div>
					<div class="bread">组件库</div>
				</div>
				<div>Hello Map</div>
			</div>
			<div class="wrapper">
				<div class="main-page">
					<router-view></router-view>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { reactive, ref, onMounted } from 'vue'
	import { useRouter } from 'vue-router'
	export default {
		name: 'Home',
		setup() {
			const router = useRouter()
			const routesList = reactive({})
			let isCollapse = ref(false)

			// 获取所有路由
			const getAllRoutes = () => {
				for (let k in router.options.routes[0].children) {
					routesList[k] = router.options.routes[0].children[k]
				}
				return routesList
			}
			getAllRoutes()
			// 折叠
			const toggle = () => {
				isCollapse.value = !isCollapse.value
			}

			return {
				isCollapse,
				toggle,
				routesList,
				getAllRoutes
			}
		}
	}
</script>

<style lang="scss">
	.basic-layout {
		position: relative;
		.nav-side {
			position: fixed;
			width: 200px;
			height: 100vh;
			background-color: #eef0f3;
			color: black;
			overflow-y: auto;
			transition: all 0.5s ease;
			.logo {
				display: flex;
				align-items: center;
				font-size: 18px;
				height: 50px;
				overflow-y: hidden;
				overflow-x: hidden;
				img {
					margin: 0 16px;
					width: 32px;
					height: 32px;
				}
			}
			.nav-menu {
				height: calc(100vh - 50px);
				border: none;
			}
			// 合并
			&.fold {
				width: 64px;
			}
			// 展开
			&.unfold {
				width: 200px;
			}
		}
		.content-right {
			margin-left: 200px;
			transition: all 0.5s;
			// 合并
			&.fold {
				margin-left: 64px;
			}
			// 展开
			&.unfold {
				margin-left: 200px;
			}
			.nav-top {
				display: flex;
				justify-content: space-between;
				padding: 0 20px;
				height: 50px;
				line-height: 50px;
				border-bottom: 1px solid #ddd;
				.nav-left {
					display: flex;
					justify-self: space-between;
					.menu-fold {
						margin-right: 15px;
						font-size: 18px;
						cursor: pointer;
					}
				}
			}
			.wrapper {
				background-color: #fff;
				padding: 20px;
				height: calc(100vh - 100px);
			}
			.main-page {
				background-color: #fff;
				height: 100%;
			}
		}
	}
</style>
